现有一个后台管理系统是用VUE实现的,现在要添加日志打印的功能。
搜了一些教程,有用到jqPrint的和原生调用的,使用的时候都会出现问题,打印区域不好设置,打印完毕后vue项目路由失效
结合了网上的教程,终于有了解决方案
1.网友打印的思路基本都是使用document.getElementById的方式获取DOM,然后进行使用jqPrint打印,和window.print(),这个方式在传统的JQuery网站中是可以实现打印功能的,但是VUE是单页面应用,实际上所有内容都包含在一个ID为App的div中。
- 测试之后页面的路由就会失效,所有使用vue绑定的事件也无法触发.
- 只有重新刷新才能生效。在打印后加和定时器写上location.reload()可以自动刷新。
2.刷新以后发现打印部分叠加到页面上了,因为打印获取的DOM节点依然存在于vue单页面的App中。
- 那就在vue项目的index.html多加一个div,专门存储打印内容,这样就不会冲突。
构建日志表的界面
在打印页可以通过document.getElementById获取到打印区域。并调用浏览器的打印功能。
3.如果不想打印完刷新的话就新建一个打印窗口,将值传入新窗口中,现在已经实现功能了。
